<template>
    <div class="v2-card">
        <a-card :bordered="bordered" size="small">
            <a-spin :spinning="loading">
                <div class="v2-card__top">
                    <div class="v2-card__avatar">
                        {{ avatar }}
                        <slot name="avatar"></slot>
                    </div>
                    <div class="v2-card__meta-wrap">
                        <div class="v2-card__meta">
                            <span class="v2-card__meta-title" v-if="title">
                                <slot name="title">{{ title }}</slot>
                            </span>
                            <span class="v2-card__meta-action" v-if="action || $slots.action">
                                <slot name="action">{{ action }}</slot>
                            </span>
                        </div>
                        <p v-if="total" class="v2-card__total">{{ total }}</p>
                    </div>
                </div>
                <div class="v2-card__desc" :style="{ height: contentHeight }">
                    <div :class="{ 'v2-card__fixed': !!_orgHeight }">
                        <slot></slot>
                    </div>
                </div>
                <div class="v2-card__footer" v-if="footer || $slots.footer">
                    <slot name="footer">{{ footer }}</slot>
                </div>
            </a-spin>
        </a-card>
    </div>
</template>

<script lang="ts" setup>

/*
图表卡片，用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[title]` | 卡片标题 | `string,TemplateRef<void>` | - |
| `[avatar]` | 头像 | `string,TemplateRef<void>` | - |
| `[action]` | 卡片操作 | `string,TemplateRef<void>` | - |
| `[total]` | 数据总量（支持HTML） | `string` | - |
| `[footer]` | 卡片底部 | `string,TemplateRef<void>` | - |
| `[contentHeight]` | 内容区域高度（单位：`px`） | `string` | - |
| `[bordered]` | 是否显示边框 | `boolean` | `false` |
<cardVue
    :title="'销售额'"
    :bordered="true"
    :total="'¥ 126,560.00'"
    footer="日销售额 12,423"
    contentHeight="46"
>
    <template #action>
        <a-tooltip placement="right">
            <template #title>
                <span>指标说明</span>
            </template>
            <InfoCircleOutlined />
        </a-tooltip>
    </template>
    <div>
        <trendVue :flag="'up'">
            <span class="font12">周同比 10%</span>
        </trendVue>
    </div>
    <div>
        <trendVue :flag="'down'">
            <span class="font12">日同比 10%</span>
        </trendVue>
    </div>
</cardVue>

*/

import { defineProps, ref, useSlots } from 'vue';

const _height = ref('auto')
const _orgHeight = ref<number | string>()

defineProps({
    bordered: {
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    avatar: {
        type: String,
        default: null
    },
    action: {
        type: String,
        default: null
    },
    total: {
        type: String,
        default: ''
    },
    footer: {
        type: String,
        default: ''
    },
    contentHeight: {
        default: 'auto'
    }
})

</script>
<script lang="ts">
export default {
    name: 'card'
}
</script>

<style lang="less" scoped>
@v2-card-prefix: ~".v2-card";
@text-color-secondary: rgba(0, 0, 0, 0.5);
@font-size-base: 14px;
@border-color-split: #f0f0f0;
@heading-color: rgba(0, 0, 0, 0.85);
@{v2-card-prefix} {
    position: relative;
    &__top {
        position: relative;
        width: 100%;
        overflow: hidden;
        &-margin {
            margin-bottom: 12px;
        }
        &-has-margin {
            margin-bottom: 20px;
        }
    }
    &__meta {
        &-wrap {
            float: left;
        }

        height: 22px;
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
        &-action {
            position: absolute;
            top: 4px;
            right: 0;
            line-height: 1;
            cursor: pointer;
        }
    }
    &__avatar {
        position: relative;
        top: 4px;
        float: left;
        margin-right: 20px;
        img {
            border-radius: 100%;
        }
    }
    &__total {
        height: 38px;
        margin-top: 4px;
        margin-bottom: 0;
        overflow: hidden;
        color: @heading-color;
        font-size: 28px;
        line-height: 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    &__desc {
        width: 100%;
        margin-bottom: 12px;
    }
    &__footer {
        margin-top: 8px;
        padding-top: 9px;
        border-top: 1px solid @border-color-split;
        font-size: 12px;
        & > * {
            position: relative;
        }
    }
}
</style>